<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>js控制css</title>
		<style type="text/css">
			.img1{
				height: 200px;
				width: 200px;
				border-radius: 100px;
			}
			.img2{
				height: 300px;
				width: 300px;
				border-radius: 0;
			}
		</style>
		<script>
			function changeStyle(){
				var h=document.getElementById("ad");
				h.style.border="2px outset blue";
				h.style.fontSize="66px";
				h.style.width="600px";
			
				h.style.transitionProperty="all";
				h.style.transitionTimingFunction="linear";
				h.style.transitionDelay="0";
				h.style.transitionDuration="5s";
				
			}
			function change2()
			{
				var h=document.getElementById("ad");
				h.style.border="none";
				h.style.fontSize="26px";
				h.style.width="300px";
			
				h.style.transitionProperty="all";
				h.style.transitionTimingFunction="linear";
				h.style.transitionDelay="0";
				h.style.transitionDuration="5s";
			}
			function changeStyle2()
			{
				var m=document.getElementById("hot1");
				m.className="img1";
			}
		</script>
	</head>
	<body>
		<h1 id="ad" onmouseover="changeStyle()" onmouseout="change2()">教育改变生活</h1>
		<input type="button" value="改变样式" onclick="changeStyle()"/>
		<img src="../day8/book-01.jpg" id="hot1"/>
		<input type="button" value="改变图片样式" onclick="changeStyle2()"/>
	</body>
</html>
